<template>
  <div class="app">
    <div class="smooth-curve">
      <van-nav-bar
        title=""
        left-text=""
        left-arrow
        class="navbar"
        :border="false"
      >
        <template #left>
          <van-icon
            name="arrow-left"
            size="18"
            color="white"
            @click="backlink"
          />
        </template>
        <template #right>
          <icon-svg
            icon-class="share"
            icon-color="#FFFFFF"
            class="shareicon"
          ></icon-svg>
        </template>
      </van-nav-bar>
      <van-action-sheet
        v-model:show="avatarshow"
        :actions="avataractions"
        cancel-text="取消"
        close-on-click-action
        @select="onAvatarSelect"
      />
      <input
        type="file"
        ref="inputFile"
        @change="changeImg"
        style="display: none"
      />
    </div>

    <div class="zhujiao-info-box">
      <div class="zhujiao-content">
        <van-image
          round
          width="90"
          height="90"
          fit="cover"
          v-lazy="image"
          @click="this.avatarshow = true"
          class="avatar"
        />
        <div class="first-line">
          <div class="name">昵称</div>
          <div class="sex">
            <icon-svg
              icon-class="gender_male"
              icon-color="#FFFFFF"
              class="gendericon"
            ></icon-svg>
          </div>
        </div>
        <div class="second-line">
          <div class="age">21岁</div>
          <div class="location">福建省.厦门市</div>
        </div>
        <div class="third-line">
          <van-text-ellipsis
            rows="1"
            class="signature"
            content="简介XXXXXXXXXXxxxxxxxxxxxxxxxxxxXXXXXXXXXXXX"
            expand-text="展开"
            collapse-text="收起"
          />
        </div>
        <div class="fourth-line">
          <div class="three-number">
            <div class="part">
              <div class="number">0</div>
              <div class="text">关注</div>
            </div>
            <div class="part">
              <div class="number">0</div>
              <div class="text">粉丝</div>
            </div>
            <div class="part">
              <div class="number">0</div>
              <div class="text">动态</div>
            </div>
          </div>
          <div class="two-buttons">
            <div class="button">+关注</div>
            <div class="button">
              <icon-svg
                icon-class="ground_chat"
                icon-color="#FFFFFF"
                class="chaticon"
              ></icon-svg>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dynamic">
      <div class="dynamic-title">
        <div class="title">动态</div>
      </div>

      <div class="dynamic-content">
        <div class="dynamic-item">
          <div class="dynamic-item-title">
            <div class="dynamic-time">
              <div class="day">29</div>
              <div class="month">/01</div>
            </div>
          </div>
          <div class="dynamic-item-content">
            动态内容动态内容动态内容动态内容动态内容动态内容动态内容动态内容动态内容
          </div>
        </div>
      </div>
    </div>
    <div style="padding-bottom: calc(50px + env(safe-area-inset-bottom))" />
  </div>
</template>
  
  <script>
import { showToast } from "vant";
import { areaList } from "@vant/area-data";
import {
  editfulltimeimg,
  editfulltimeage,
  editfulltimephone,
  editfulltimewechat,
  editfulltimenickname,
  editfulltimename,
} from "@/http/request.js";
import { useStore } from "@/store/index.js";

export default {
  data() {
    return {
      userinfo: "",
      userid: "",
      image: "",
      nickname: "",
      gender: "",
      birth: "",
      city: "",
      avatarshow: false,
      avataractions: [{ name: "从手机相册选择" }],
      genderactions: [{ name: "男" }, { name: "女" }, { name: "保密" }],
      gendershow: false,
      birthshow: false,
      areashow: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      areaList,
    };
  },
  methods: {
    inituserinfo() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      this.nickname = userinfo.nickname;
      this.gender = userinfo.gender;
      this.birth = userinfo.birth;
      this.userid = userinfo.id;
      this.city = userinfo.city;
      this.image = userinfo.image;
    },
    onAvatarSelect(value) {
      this.$refs.inputFile.click();
      this.avatarshow = false;
      // showToast(value.name);
    },
    changeImg() {
      const file = this.$refs.inputFile.files[0];
      const formdata = new FormData();
      formdata.append("image", file);
      formdata.append("id", this.userid);
      userimageedit(formdata).then((res) => {
        if (res.code == 0) {
          this.image = res.data.path;
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.image = res.data.path;
          store.setUserinfo(userinfo);
          showToast(res.msg);
        } else {
          showToast(res.msg);
        }
      });
    },

    onGenderSelect(value) {
      var genderid = 0;
      // 2是保密 1是男 0是女
      if (value.name == "男") {
        genderid = 1;
      } else if (value.name == "女") {
        genderid = 0;
      } else {
        genderid = 2;
      }
      editgender({ id: this.userid, gender: genderid }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          this.gender = value.name;
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.gender = value.name;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.avatarshow = false;
    },
    onDayConfirm(value) {
      this.birth = value.selectedValues.join("/");
      this.birth = this.formatDate(this.birth);
      editbirth({ id: this.userid, birth: this.birth }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.birth = this.birth;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.birthshow = false;
    },
    onAreaConfirm(value) {
      this.city = value.selectedOptions.map((item) => item.text).join("/");
      editcity({ id: this.userid, city: this.city }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.city = this.city;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.areashow = false;
    },

    formatDate(date) {
      const timestamp = Date.parse(date);
      const dateObject = new Date(timestamp);
      const year = dateObject.getFullYear();
      const month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
      const day = dateObject.getDate().toString().padStart(2, "0");
      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },

    backlink() {
      this.$router.back();
    },

    changenickname() {
      this.$router.push("changenickname");
    },
  },
  mounted() {
    this.userinfo = JSON.parse(this.$route.params.userinfo);
    this.inituserinfo();
  },
};
</script>
  
  <style scoped>
.app {
  background-color: #f5f3f3;
  height: 100vh;
}

.navbar {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.shareicon {
  width: 18px;
  height: 18px;
  color: white;
}
.smooth-curve {
  width: 100%;
  height: 250px;
  background-image: url("../../assets/icons/user/mybackimg.svg");
  background-position: bottom center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
}

.avatar {
  position: absolute;
  top: 0;
  left: 70px;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.zhujiao-info-box {
  display: flex;
  position: relative;
  width: 100%;
  margin-top: -30px;
  z-index: 5;
}

.zhujiao-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.first-line {
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 25px 0 0 30px;
  font-size: 19px;
  font-weight: 500;
}
.gendericon {
  width: 18px;
  height: 18px;
  margin-left: 5px;
  margin-top: 4px;
}
.second-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 15px;
  padding: 10px 0 0 30px;
}

.second-line .age {
  margin-right: 15px;
  color: white;
  background-color: #a0c9f5;
  padding: 1px 8px;
  border-radius: 20px;
}

.second-line .location {
  margin-right: 20px;
  color: #5ea2fc;
  background-color: whitesmoke;
  padding: 1px 10px;
  border-radius: 20px;
}

.third-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 5px 30px 5px 30px;
  font-size: 15px;
}

.signature {
  width: 100%;
  white-space: normal; /* 允许内容根据需要换行 */
  overflow-wrap: break-word; /* 在必要时断字 */
  word-break: keep-all; /* 在中英文混合时，尽量避免在中文字符间断行 */
  padding: 10px 0 0 0;
}

.fourth-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 5px 30px 10px 30px;
}

.three-number {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  width: 45%;
}

.part {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.two-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 50%;
}

.button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 37px;
  border-radius: 10px;
  font-size: 15px;
}

.button:nth-child(1) {
  background-color: #5e94fe;
  color: white;
  border: 1px solid #5ea2fc;
  width: 65%;
}

.button:nth-child(2) {
  background-color: #88bcf5;
  width: 30%;
}
.chaticon {
  width: 30px;
  height: 30px;
}
.dynamic {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 10px;
  background-color: white;
  border-radius: 15px;
}

.dynamic-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px 0 30px;
  font-size: 20px;
  font-weight: 500;
}

.dynamic-content {
  display: flex;
  flex-direction: column;
  margin: 10px 30px 10px 30px;
  background-color: #f2f3f5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 5px;
}

.dynamic-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.dynamic-time {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.day {
  font-size: 15px;
  height: 15px;
}

.month {
  font-size: 10px;
  height: 15px;
  color: #888889;
}

.dynamic-item-title {
  font-size: 15px;
  font-weight: 500;
}

.dynamic-item-content {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  font-size: 20px;
}
</style>